<template>
  <div style="display: flex;">
    <!-- 左部分 -->
    <el-affix :offset="70">
      <div class="left">
        <el-card>
          <!-- 头像 & 用户名部分 -->
          <template #header>
            <div class="card-header" style="display: flex;align-items: center;flex-direction: column;">
              <el-avatar :size="100" :src="recruiter.headImage" />
              <h3>{{ recruiter.hrNick }}</h3>
            </div>
          </template>
          <!-- 菜单部分 -->
          <div>
            <el-menu
                :default-active="defaultActive"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :router="true"
                style="border-right: 0"
                @select="changeMenu"
            >
              <el-menu-item index="/recruiterMain/selfManage/selfMessage">
                <el-icon><Avatar /></el-icon>
                <span>个人资料</span>
              </el-menu-item>
              <el-menu-item index="/recruiterMain/selfManage/jobMessage">
                <el-icon><MessageBox /></el-icon>
                <span>已发布招聘信息</span>
              </el-menu-item>
              <el-menu-item index="/recruiterMain/selfManage/passwordChange">
                <el-icon><Setting /></el-icon>
                <span>密码设置</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-card>
      </div>
    </el-affix>
    <!-- 右部分 -->
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, watch, watchEffect} from "vue";
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();

const defaultActive = ref('/recruiterMain/selfManage/selfMessage')
const changeMenu = (key) =>{
  defaultActive.value = key
}

const recruiter = ref({
  hrNick: '',
  headImage: ''
});
// 处理头像 & 姓名修改
const handleChange = (event: CustomEvent) => {
  if(event.type === 'changeHrNick') {
    recruiter.value.hrNick = event.detail;
  } else if(event.type === 'changeHeadImage') {
    recruiter.value.headImage = event.detail;
  }
}
// 初始化
onMounted(() => {
  //
  defaultActive.value = route.path
  // 初始获得数据
  recruiter.value.hrNick = JSON.parse(localStorage.getItem('recruiter')).hrNick;
  recruiter.value.headImage = JSON.parse(localStorage.getItem('recruiter')).headImage;
  // 监听页面更新
  const handler = (event: CustomEvent) => {
    handleChange(event);
  };
  window.addEventListener('changeHrNick', handler);
  window.addEventListener('changeHeadImage', handler);
  return () => {
    window.removeEventListener('changeHrNick', handler);
    window.removeEventListener('changeHeadImage', handler);
  }
})

// 下拉菜单开闭操作
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style scoped>
.left, .right {
  background-color: #FFFFFF;
  margin: 20px 0 20px 200px;
}
.left {
  width: 200px;
}
.right {
  margin: 30px 200px 30px 50px;
  flex: 1;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  box-shadow: 0 0 4px 4px #e4e7ed;
  min-height: calc(100vh - 125px);
}
</style>
